<script>
export default {
  name: 'App'
}
</script>

<template>
  <div id="app">
    <router-view v-slot="{ Component, route }">
      <transition :name="route.meta.transition || 'none'" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style lang="less">
//@import "../src/assets/global.css";
// :focus {
//   outline: -webkit-focus-ring-color auto 0px;
// }
// body {
//   margin: 0;
//   min-width: 500px;
//   background-color: #f5f6f6;
// }
// body,html {margin:0; height:100%;}
// ul {
//   padding: 0;
//   margin: 0;

// li {
//   list-style-type: none;
// }
// }

// .ov-tip{
//   overflow: hidden;
//   text-overflow: ellipsis;
//   display: -webkit-box;
//   -webkit-line-clamp: 2;
//   -webkit-box-orient: vertical;
// }

// .item-desc{
//   font-size: small;
//   color: #5e5e5e;
// }

// .max-fill{
//   width: 100% !important;
// }
</style>

<style lang="scss">
// 普通页面过渡
.none-enter-active,
.none-leave-active {
  transition: opacity 0.1s ease;
}

.none-enter-from,
.none-leave-to {
  opacity: 0;
}

// 滑动过渡效果
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease-out;
}

.slide-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
